<template>
    <div>
        <el-table
                id="printCons"
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column label="基本工资">
                <el-table-column
                        prop="diSize"
                        label="底薪"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="quanSize"
                        label="全勤"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="buzhuSize"
                        label="补贴"
                        width="300">
                </el-table-column>
            </el-table-column>
            <el-table-column
                    prop="zhong"
                    label="应发工资">
            </el-table-column>
            <el-table-column
                    prop="size"
                    label="实发工资">
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="PrintRow">打 印</el-button>
                <el-button @click="recordVisible = false">取 消</el-button>
        </span>
    </div>
</template>

<script>
    import * as Printjs from "print-js";
    export default {
        name: "driverPrint",
        data(){
            return{
                tableData: []
            }
        },
        methods:{
            init(){
                let param={
                    driverId:''
                };
                param.driverId=window.sessionStorage.getItem("id");
                this.$http({
                    url:'/wages/getOne',
                    method: 'get',
                    params:param
                }).then(result=>{
                    console.log(result);
                    if(result.status==200){
                        this.$message({
                            type:'success',
                            message:'获取工资条成功'
                        });
                        result.data['zhong']=result.data.buzhuSize+result.data.quanSize+result.data.diSize;
                        this.tableData.push(result.data);
                        console.log(this.tableData)
                    }

                })
            },
            PrintRow(index, row){
                Printjs({
                    printable: "printCons", //要打印内容的id
                    type: "html",
                    header:"工资条",
                    headerStyle: 'text-align:center;color:#000;width:100%;border:1px #000 solid;',
                    scanStyles: false,
                    style: 'table{table-layout: fixed;border-collapse:collapse;} table tr td,th { padding:15px;border:1px #000 solid; white-space:normal;word-break:break-all; text-align:center}' // 表格样式
                });
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>

</style>